<!--
 * @Author: Hzl
 * @Date: 2021-10-28 20:27:40
 * @LastEditors: Hzl
 * @LastEditTime: 2021-11-05 20:57:18
 * @Description: 
-->
<template >
    <div>
        <el-form>
            <el-row>
                <el-col :span="16">
                <el-form-item label="标题" label-width="80px">
                    <el-input v-model="form.title"></el-input>
                </el-form-item>
                <el-form-item label="分类" label-width="80px">
                    <el-select v-model="form.categoryId" placeholder="请选择">
                    <el-option v-for='item in category' :key='item.id' :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                </el-col>
                <el-col :span="8">
                <!-- 图片上传的组件 -->
                    <el-form-item label="封皮" label-width="80px">
                        <el-upload
                        action="http://81.69.24.232/pet/jz_upload.php"
                        list-type="picture-card"
                        :on-success="handleAvatarSuccess"
                        :limit="1"
                        >
                        <i class="el-icon-plus"></i>
                        </el-upload>
                        <div>最大上传文件不超过3M</div>
                    </el-form-item>
                </el-col>
            </el-row>
            <!-- 第二行 -->
            <el-form-item label="正文" label-width="80px">
                <!-- 富文本编辑器组件 -->
                <Tinymce v-model="form.content" :height='240'></Tinymce>
            </el-form-item>
            <el-form-item>
                <div style='text-align:right'>
                <el-button type="text" @click='back'>返回</el-button>
                <el-button type="primary" @click='toSubmit'>发布</el-button>
                </div>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import {saveOrUpdatePro,findAll} from '@/api/information'
import Tinymce from "@/components/Tinymce";
import { uploadFileURL, showFileURL } from "@/utils/config";
export default {
    // 注册富文本编辑器
    components: {
        Tinymce
    },
    data() {
        return {
        form: {},
        // 栏目数组
        category:[],
        uploadFileURL,
        showFileURL
        };
    },
    created(){
        this.findAllCategory()
    },
    methods: {
        // 封装查询栏目信息方法
        async findAllCategory(){
            let res=await findAll()
            this.category=res.data
        },
        // 发布功能
        async toSubmit(){
            let res=await saveOrUpdatePro(this.form).then(res=>{
                this.$message({
                    type:'success',
                    message:res.message
                    })
                this.back()
            })
        },
        // 返回上一个页面
        back(){
            this.$router.go(-1)
        },
        // 图片上传之后的成功回调
        handleAvatarSuccess(res) {
            this.$set(this.form, "cover", res);
        }
    }
};
</script>